<template>
  <d2-container>
    <PageSearch
      :searchFormConfig="searchFormConfig"
      @queryBtnClick="handleQueryBtnClick"
      @resetBtnClick="handleResetBtnClick"
    ></PageSearch>
    <PageContent
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      @deleteClick="handleDeleteClick"
      @editBtnClick="handEditBtnClick"
      :list="list"
      pageName="users"
    >
      <template #headerHandlerLeft>
        <el-button type="primary" size="medium" @click="readAllClick()"
          >批量已读</el-button
        >
        <el-button
          type="primary"
          size="medium"
          :loading="loading"
          @click="stateAllClick(false)"
          >批量禁用</el-button
        >
        <el-button
          type="primary"
          size="medium"
          :loading="loading"
          @click="stateAllClick(true)"
          >批量启用</el-button
        >
      </template>
      <template #answer_img_list="scope">
        <div
          class="demo-image__preview"
          v-if="scope.row.answer_img_list.length"
        >
          <el-popover placement="right" width="400" trigger="click">
            <div>
              <div class="demo-image__preview">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="itey"
                  :preview-src-list="scope.row.answer_img_list"
                  v-for="(itey, indey) in scope.row.answer_img_list"
                  :key="indey"
                >
                </el-image>
              </div>
            </div>
            <el-button
              v-if="scope.row.answer_img_list.length"
              icon="el-icon-thumb"
              size="mini"
              type="text"
              slot="reference"
              >查看</el-button
            >
          </el-popover>
        </div>
        <div v-else></div>
      </template>
      <template #img_list="scope">
        <el-popover
          v-if="scope.row.img_list.length"
          placement="right"
          width="400"
          trigger="click"
        >
          <div>
            <div class="demo-image__preview">
              <el-image
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="itey"
                :preview-src-list="scope.row.img_list"
                v-for="(itey, indey) in scope.row.img_list"
                :key="indey"
              >
              </el-image>
            </div>
          </div>
          <el-button
            icon="el-icon-thumb"
            size="mini"
            type="text"
            slot="reference"
            >查看</el-button
          >
        </el-popover>
        <div v-else></div>
      </template>

      <!-- 是否已读 -->
      <template #is_read="scope">
        <el-switch
          v-model="scope.row.is_read"
          active-color="#13ce66"
          @change="isTopChange($event, scope.row)"
        >
        </el-switch>
      </template>
      <!-- 是否置顶 -->
      <template #is_top="scope">
        <el-switch
          v-model="scope.row.is_top"
          active-color="#13ce66"
          @change="is_topChange($event, scope.row)"
        >
        </el-switch>
      </template>
      <template #check_status="scope">
        <el-button
          plain
          size="mini"
          :type="scope.row.check_status ? 'success' : 'danger'"
          @click="stateClick(scope.row)"
        >
          {{ scope.row.check_status ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template #btnBox="scope">
        <el-button
          icon="el-icon-thumb"
          size="mini"
          type="text"
          @click="handlePraiseClick(scope.row)"
          >编辑点赞数</el-button
        >
      </template>
      <!-- 点赞(后台添加) -->
      <template #thumbup_all_num="scope">
        {{ `${scope.row.thumbup_all_num}(${scope.row.thumbup_num})` }}
      </template>
    </PageContent>
    <!-- 编辑评论 -->
    <PageModal
      ref="pageModalRef"
      :defaultInfo="defaultInfo"
      :modalConfig="modalConfig"
      @confirmClick="handleConfirmClick"
    >
      <hzw-upload
        :fileList="defaultInfo.imgstr"
        :size="20"
        @upload="imgstr_upload($event, 'imgstr', 'defaultInfo')"
        :format="['jpg', 'png', 'gif', 'bmp']"
        listType="picture-card"
      ></hzw-upload>
    </PageModal>
    <!-- 编辑虚拟点赞 -->
    <PageModal
      :modalConfig="praiseModalConfig"
      :defaultInfo="praiseDefaultInfo"
      ref="praisePageModalRef"
      @confirmClick="handlePraiseConfirmClick"
    >
    </PageModal>
  </d2-container>
</template>

<script>
import * as actionTypes from '@/api/base.js'
import util from '@/libs/util.js'
import hzwUpload from '@/lxj-components/hzw-upload'

import PageSearch from '@/lxj-components/page-search'
import PageContent from '@/lxj-components/page-content'
import PageModal from '@/lxj-components/page-modal'
export default {
  name: 'communit_comment_all',
  components: {
    hzwUpload,
    PageSearch,
    PageContent,
    PageModal
  },
  data() {
    return {
      searchFormConfig: {
        labelWidth: '0',
        itemStyle: {
          padding: '10px 20px'
        },
        colLayout: {
          lg: 6,
          xl: 4
        },
        formItems: [
          {
            field: 'keyword',
            type: 'input',
            placeholder: '内容'
          },
          {
            field: 'check_status',
            type: 'select',
            placeholder: '请选择状态',
            options: [
              { title: '已审核', value: true },
              { title: '未审核', value: false }
            ]
          },
          {
            field: 'is_top',
            type: 'select',
            placeholder: '是否置顶',
            options: [
              { title: '是', value: true },
              { title: '否', value: false }
            ]
          },
          {
            field: 'is_read',
            type: 'select',
            placeholder: '是否已读',
            options: [
              { title: '是', value: true },
              { title: '否', value: false }
            ]
          },
          {
            field: 'source_external',
            type: 'select',
            placeholder: '外部来源',
            options: [
              { title: '内部', value: 0 },
              { title: '豆瓣', value: 1 }
            ]
          },
          {
            field: 'source',
            type: 'select',
            placeholder: '来源',
            options: [
              { title: '后台', value: 1 },
              { title: '小程序', value: 2 },
              { title: 'IOS', value: 3 },
              { title: '安卓', value: 4 }
            ]
          },
          {
            field: 'createAt',
            type: 'datepicker',
            otherOptions: {
              startPlaceholder: '开始时间',
              endPlaceholder: '结束时间',
              type: 'daterange',
              valueFormat: 'timestamp'
            }
          }
        ]
      },
      contentTableConfig: {
        title: '用户列表',
        propList: [
          { prop: 'uid', label: 'ID', minWidth: '100' },
          { prop: 'nick_name', label: '用户昵称（ID）', minWidth: '150' },
          {
            prop: 'add_time',
            label: '添加时间',
            minWidth: '180',
            slotName: 'add_time'
          },
          // question_title
          {
            prop: 'question_title',
            label: '所属问题标题',
            minWidth: '150',
            slotName: 'question_title'
          },
          {
            prop: 'answer_content',
            label: '所属回答',
            minWidth: '150',
            slotName: 'answer_content'
          },
          {
            prop: 'answer_img_list',
            label: '所属回答图片',
            minWidth: '120',
            slotName: 'answer_img_list'
          },
          {
            prop: 'content',
            label: '发布内容',
            minWidth: '150',
            slotName: 'content'
          },
          {
            prop: 'img_list',
            label: '发布内容图片',
            minWidth: '120',
            slotName: 'img_list'
          },
          {
            prop: 'is_read',
            label: '是否已读',
            minWidth: '100',
            slotName: 'is_read'
          },
          {
            prop: 'is_top',
            label: '置顶',
            minWidth: '100',
            slotName: 'is_top'
          },
          {
            prop: 'check_status',
            label: '状态',
            minWidth: '100',
            slotName: 'check_status'
          },
          {
            prop: 'thumbup_all_num',
            label: '点赞(后台添加)',
            minWidth: '120',
            slotName: 'thumbup_all_num'
          },
          {
            label: '操作',
            minWidth: '320',
            slotName: 'handler',
            fixed: 'right'
          }
        ],
        pageInfo: { currentPage: 1, pageSize: 10 },
        listCount: 0, // 页码
        // showIndexColumn: true,
        showSelectColumn: true,
        showFooter: true,
        editBtn: true, // 编辑按钮
        deleteBtn: true // 删除按钮
      },
      modalConfig: {
        title: '编辑',
        formItems: [
          {
            field: 'content',
            type: 'input',
            label: '内容',
            otherOptions: {
              type: 'textarea',
              autosize: { minRows: 4, maxRows: 8 }
            },
            placeholder: '请输入内容'
          }
        ],
        colLayout: { span: 24 },
        itemStyle: {}
      },
      defaultInfo: {
        imgstr: []
      },
      praiseModalConfig: {
        title: '追加点赞',
        formItems: [
          {
            field: 'thumbup_num',
            type: 'input',
            label: '虚拟点赞数',
            placeholder: '请输入点赞数'
          }
        ],
        colLayout: { span: 24 },
        itemStyle: {}
      },
      praiseDefaultInfo: {},
      list: [],
      formData: {},
      fileList: []
    }
  },
  methods: {
    async getList() {
      const pageInfo = {
        current_page: this.contentTableConfig.pageInfo.currentPage,
        page_size: this.contentTableConfig.pageInfo.pageSize
      }

      const formData = { ...this.formData }
      if (formData.createAt) {
        formData.begin_time = formData.createAt[0] / 1000
        formData.end_time = formData.createAt[1] / 1000
        delete formData.createAt
      }

      const obj = {
        ...formData,
        ...pageInfo,
        urlType: 'java'
      }

      const res = await this.$http.post(actionTypes.openCommentsAllList, obj)
      this.list = res.data.list
      this.$set(this.contentTableConfig, 'listCount', res.data.total)
      // console.log(res)
    },
    async userList() {
      // 随机用户列表
      const obj = {
        is_markevvv: true,
        count: 99,
        urlType: 'java'
      }
      const res = await this.$http.post(actionTypes.userRandomUserList, obj)

      console.log(res)
    },
    handleQueryBtnClick(formData) {
      // console.log(formData)
      this.formData = formData
      this.getList()
    },
    handleResetBtnClick(formData) {
      this.formData = formData
      this.getList()
    },
    async is_topChange(event, row) {
      // 置顶
      console.log(event, row)
      await this.$http.post(actionTypes.openCommentsTop, {
        urlType: 'java',
        is_top: event,
        id: row.id
      })
    },
    // 是否已读
    async isTopChange(event, row) {
      await this.$http.post(actionTypes.openCommentsBatchRead, {
        urlType: 'java',
        is_read: event,
        ids: row.id
      })
    },
    async readAllClick() {
      // console.log(this.$refs.pageContentRef.selectList)
      if (!this.$refs.pageContentRef.selectList.length) {
        this.$message({
          message: '请选择',
          type: 'warning'
        })
        return
      }
      const obj = {
        urlType: 'java',
        is_read: true,
        ids: this.$refs.pageContentRef.selectList
          .map((item) => item.id)
          .toString()
      }
      await this.$http.post(actionTypes.openCommentsBatchRead, obj)
      this.$message({
        message: '操作成功！',
        type: 'success'
      })
      this.getList()
    },
    handEditBtnClick(item) {
      // 编辑
      console.log(item)
      this.defaultInfo.imgstr = this.defaultInfo = {
        imgstr: item.img_list.map((item) => {
          return {
            url: item
          }
        }),
        content: item.content,
        id: item.id
      }
      this.$refs.pageModalRef.dialogVisible = true
    },
    async handleConfirmClick(item) {
      // 编辑提交
      const data = {
        ...item,
        imgstr: item.imgstr.map((item) => item.url).toString(),
        urlType: 'java',
        system_platform: 'Web'
      }
      await this.$http.post(actionTypes.openCommentsUpdates, data)
      this.$message({
        message: '操作成功!',
        type: 'success'
      })
      this.$refs.pageModalRef.dialogVisible = false
      this.getList()
      console.log(item)
    },
    // 问题描述 图片上传放回
    imgstr_upload(e, val, name) {
      console.log(e, val)
      this.$set(this[name], val, e)
    },
    async stateClick(item) {
      console.log(item)
      // 启用/禁用
      const obj = {
        urlType: 'java',
        check_status: !item.check_status,
        ids: item.id
      }
      await this.$http.post(actionTypes.openCommentsBatchCheckStatus, obj)
      this.$message({
        message: '操作成功！',
        type: 'success'
      })
      this.getList()
    },
    async stateAllClick(isEnable) {
      // 批量禁用启用
      console.log(this.$refs.pageContentRef.selectList)
      if (!this.$refs.pageContentRef.selectList.length) {
        this.$message({
          message: '请选择',
          type: 'warning'
        })
        return
      }
      const obj = {
        urlType: 'java',
        check_status: isEnable,
        ids: this.$refs.pageContentRef.selectList
          .map((item) => item.id)
          .toString()
      }
      await this.$http.post(actionTypes.openCommentsBatchCheckStatus, obj)
      this.$message({
        message: '操作成功！',
        type: 'success'
      })
      this.getList()
    },
    handleDeleteClick(item) {
      util.formDelete(
        actionTypes.openCommentsDeletes,
        item.id,
        this.getList,
        '此操作将永久删除该条数据, 是否继续?',
        'java'
      )
    },
    async handlePraiseClick(item) {
      console.log(item)
      // 编辑点赞数
      this.praiseDefaultInfo = {
        id: item.id,
        thumbup_num: item.thumbup_num
      }
      this.$refs.praisePageModalRef.dialogVisible = true
    },
    async handlePraiseConfirmClick(item) {
      console.log(item)
      const obj = {
        ...item,
        urlType: 'java'
      }
      await this.$http.post(actionTypes.openCommentsEditThumbupNum, obj)
      this.$refs.praisePageModalRef.dialogVisible = false
      this.$message({
        message: '操作成功！',
        type: 'success'
      })
      this.getList()
    }
  },
  created() {
    // this.getClassifyList()
    this.userList()
    this.getList()
  },
  watch: {
    'contentTableConfig.pageInfo'(val) {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
